<template>
  <div class="ap-center-layout">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <ul>
        <li class="sidebar-item">概览</li>
        <li class="sidebar-item">用户</li>
        <li class="sidebar-item-group">
          <div class="group-title">
            <span class="icon-wireless"></span>
            无线业务
          </div>
          <ul class="submenu">
            <li class="submenu-item">AC</li>
            <li class="submenu-item">无线概览</li>
            <li class="submenu-item" :class="{ active: currentView === 'rf' }" @click="currentView = 'rf'">射频</li>
            <li class="submenu-item" :class="{ active: currentView === 'ap' }" @click="currentView = 'ap'">AP</li>
            <li class="submenu-item">SSID</li>
            <li class="submenu-item">Mesh&WDS</li>
            <li class="submenu-item">潜在问题</li>
            <li class="submenu-item">WIDS</li>
            <li class="submenu-item">频谱分析</li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- AP视图 -->
    <div v-if="currentView === 'ap'" class="main-content-area">
      <!-- 顶部选项卡 -->
      <div class="tabs-container">
        <button
          :class="{ active: activeTab === 'apStats' }"
          @click="activeTab = 'apStats'"
        >
          AP统计
        </button>
        <button
          :class="{ active: activeTab === 'uncertifiedApList' }"
          @click="activeTab = 'uncertifiedApList'"
        >
          未认证AP列表
        </button>
        <button
          :class="{ active: activeTab === 'apWiredPortStats' }"
          @click="activeTab = 'apWiredPortStats'"
        >
          AP有线口统计
        </button>
        <div class="auto-refresh-toggle">
          自动刷新: OFF
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <!-- AP统计内容 -->
        <div v-if="activeTab === 'apStats'" class="ap-stats-content">
          <div class="section-title">AP性能分析</div>
          <div class="charts-grid">
            <div class="chart-container">
              <div ref="loadDistributionChart" style="width: 100%; height: 250px;"></div>
            </div>
            <div class="chart-container">
              <div ref="failureRateChart" style="width: 100%; height: 250px;"></div>
            </div>
            <div class="chart-container">
              <div ref="disconnectionRateChart" style="width: 100%; height: 250px;"></div>
            </div>
            <div class="chart-container">
              <div ref="apStatusChart" style="width: 100%; height: 250px;"></div>
            </div>
          
          </div>

          <div class="section-title ap-management-title">AP管理</div>
          <div class="ap-management-controls">
            <div class="left-controls">
              <button class="control-btn">智能诊断</button>
              <button class="control-btn">上线失败记录</button>
              <button class="control-btn">下线记录</button>
              <button class="control-btn">导出信息</button>
              <button class="control-btn">IoT插卡信息</button>
            </div>
            <div class="right-controls">
              <button class="view-btn active">默认列</button>
              <button class="view-btn">全部列</button>
              <button class="view-btn">自定义列</button>
            </div>
          </div>
          <div class="ap-table">
            <table>
              <thead>
                <tr>
                  <th>
                    <input type="checkbox" />
                  </th>
                  <th>AP名称</th>
                  <th>状态</th>
                  <th>MAC地址</th>
                  <th>AP组</th>
                  <th>IP地址</th>
                  <th>AP型号</th>
                  <th>版本</th>
                  <th>供电状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><input type="checkbox" /></td>
                  <td>Y_AP</td>
                  <td>normal</td>
                  <td>
                    <span class="status-dot normal"></span>
                    在线
                  </td>
                  <td>e477-2755-b420</td>
                  <td>default</td>
                  <td>10.2.0.231</td>
                  <td>AirEngine07523-H</td>
                  <td>V200R022C00SPC500</td>
                  <td>正常</td>
                  <td>更多</td>
                </tr>
                <tr>
                  <td><input type="checkbox" /></td>
                  <td>X_AP</td>
                  <td>normal_2</td>
                  <td>
                    <span class="status-dot normal"></span>
                    在线
                  </td>
                  <td>e477-2755-b421</td>
                  <td>default</td>
                  <td>10.2.0.232</td>
                  <td>AirEngine07523-H</td>
                  <td>V200R022C00SPC500</td>
                  <td>正常</td>
                  <td>更多</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <span>共 10 条</span>
            <div class="pagination-controls">
              <button disabled>上一页</button>
              <button class="active">1</button>
              <button>下一页</button>
            </div>
          </div>
        </div>

        <!-- 未认证AP列表内容 -->
        <div v-if="activeTab === 'uncertifiedApList'" class="uncertified-ap-list-content">
          <p>未认证AP列表内容区域</p>
        </div>

        <!-- AP有线口统计内容 -->
        <div v-if="activeTab === 'apWiredPortStats'" class="ap-wired-port-stats-content">
          <p>AP有线口统计内容区域</p>
        </div>
      </div>
    </div>

    <!-- 射频视图 -->
    <div v-if="currentView === 'rf'" class="main-content-area">
      <div class="rf-content">
        <div class="section-title">射频关键指标</div>
        <div class="rf-charts-grid">
          <!-- 信道利用率 -->
          <div class="rf-chart-container">
            <div class="rf-chart-title">信道利用率</div>
            <div ref="channelUtilChart" style="width: 100%; height: 180px;"></div>
          </div>
          <!-- 干扰率 -->
          <div class="rf-chart-container">
            <div class="rf-chart-title">干扰率</div>
            <div ref="interferenceChart" style="width: 100%; height: 180px;"></div>
          </div>
          <!-- 底噪 -->
          <div class="rf-chart-container">
            <div class="rf-chart-title">底噪</div>
            <div ref="noiseChart" style="width: 100%; height: 180px;"></div>
          </div>
          <!-- 关联率 -->
          <div class="rf-chart-container">
            <div class="rf-chart-title">关联率</div>
            <div ref="associationChart" style="width: 100%; height: 180px;"></div>
          </div>
          <!-- 重传率 -->
          <div class="rf-chart-container">
            <div class="rf-chart-title">重传率</div>
            <div ref="retransmissionChart" style="width: 100%; height: 180px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ApCenter',
  data() {
    return {
      activeTab: 'apStats',
      currentView: 'ap',  // 默认显示AP视图
      loadChart: null,
      failureRateChart: null,
      disconnectionRateChart: null,
      apStatusChart: null,
      // 射频图表实例
      channelUtilChart: null,
      interferenceChart: null,
      noiseChart: null,
      associationChart: null,
      retransmissionChart: null,
    };
  },
  watch: {
    currentView(newView) {
      if (newView === 'rf') {
        this.$nextTick(() => {
          this.initRfCharts();
        });
      }
    }
  },
  mounted() {
    if (this.currentView === 'ap') {
      this.initApCharts();
    }
  },
  beforeDestroy() {
    // 清理所有图表实例
    [
      this.loadChart, this.failureRateChart, this.disconnectionRateChart, 
      this.apStatusChart, this.channelUtilChart, this.interferenceChart,
      this.noiseChart, this.associationChart, this.retransmissionChart
    ].forEach(chart => {
      if (chart) {
        chart.dispose();
      }
    });
  },
  methods: {
    initApCharts() {
      this.initLoadDistributionChart();
      this.initFailureRateChart();
      this.initDisconnectionRateChart();
      this.initApStatusChart();
    },
    initLoadDistributionChart() {
      this.loadChart = echarts.init(this.$refs.loadDistributionChart);
      
      const option = {
        title: {
          text: '基于负载的AP数分布',
          left: 'left',
          top: 0,
          textStyle: {
            fontSize: 13,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}个AP'
        },
        xAxis: {
          type: 'category',
          data: ['0', '20', '40', '60', '80', '100'],
          name: '(%)',
          nameLocation: 'end',
          nameGap: 8,
          axisLabel: {
            interval: 0,
            fontSize: 11,
            margin: 6
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          minInterval: 2,
          max: 10,
          splitNumber: 5,
          axisLabel: {
            fontSize: 11
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#eee'
            }
          }
        },
        series: [{
          data: [8, 5, 3, 2, 1, 0],
          type: 'bar',
          barWidth: '35%',
          itemStyle: {
            color: '#5470c6'
          }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '15%',
          containLabel: true
        }
      };
      
      this.loadChart.setOption(option);
      
      window.addEventListener('resize', () => {
        this.loadChart.resize();
      });
    },
    initFailureRateChart() {
      this.failureRateChart = echarts.init(this.$refs.failureRateChart);
      
      const option = {
        title: {
          text: '基于用户接入失败率的AP数分布',
          left: 'left',
          top: 0,
          textStyle: {
            fontSize: 13,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}个AP'
        },
        xAxis: {
          type: 'category',
          data: ['0', '20', '40', '60', '80', '100'],
          name: '(%)',
          nameLocation: 'end',
          nameGap: 8,
          axisLabel: {
            interval: 0,
            fontSize: 11,
            margin: 6
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          minInterval: 10,
          max: 40,
          splitNumber: 5,
          axisLabel: {
            fontSize: 11
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#eee'
            }
          }
        },
        series: [{
          data: [19, 14, 12, 11, 20, 10],
          type: 'bar',
          barWidth: '35%',
          itemStyle: {
            color: '#91cc75'  // 使用不同的颜色区分
          }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '15%',
          containLabel: true
        }
      };
      
      this.failureRateChart.setOption(option);
      
      window.addEventListener('resize', () => {
        this.failureRateChart.resize();
      });
    },
    initDisconnectionRateChart() {
      this.disconnectionRateChart = echarts.init(this.$refs.disconnectionRateChart);
      
      const option = {
        title: {
          text: '基于用户掉线率的AP数分布',
          left: 'left',
          top: 0,
          textStyle: {
            fontSize: 13,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}个AP'
        },
        xAxis: {
          type: 'category',
          data: ['0', '20', '40', '60', '80', '100'],
          name: '(%)',
          nameLocation: 'end',
          nameGap: 8,
          axisLabel: {
            interval: 0,
            fontSize: 11,
            margin: 6
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          minInterval: 10,
          max: 40,
          splitNumber: 5,
          axisLabel: {
            fontSize: 11
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#eee'
            }
          }
        },
        series: [{
          data: [25, 18, 15, 12, 8, 5],
          type: 'bar',
          barWidth: '35%',
          itemStyle: {
            color: '#ee6666'  // 使用红色系来表示掉线情况
          }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '15%',
          containLabel: true
        }
      };
      
      this.disconnectionRateChart.setOption(option);
      
      window.addEventListener('resize', () => {
        this.disconnectionRateChart.resize();
      });
    },
    initApStatusChart() {
      this.apStatusChart = echarts.init(this.$refs.apStatusChart);
      
      const option = {
        title: {
          text: '基于AP状态的AP数分布',
          left: 'left',
          top: 0,
          textStyle: {
            fontSize: 13,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: 'center',
          itemWidth: 8,
          itemHeight: 8,
          icon: 'circle',
          formatter: name => {
            const data = option.series[0].data;
            const item = data.find(item => item.name === name);
            return `${name} ${item.value}%`;
          }
        },
        series: [{
          type: 'pie',
          radius: ['60%', '75%'],  // 缩小环形图大小
          center: ['38%', '55%'],  // 稍微向左调整以适应图例
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: [
            { 
              value: 95.55, 
              name: '认证正常',
              itemStyle: {
                color: '#91cc75'  // 绿色
              }
            },
            { 
              value: 4.45, 
              name: '认证异常',
              itemStyle: {
                color: '#fac858'  // 橙色
              }
            }
          ]
        }],
        grid: {
          containLabel: true
        }
      };
      
      this.apStatusChart.setOption(option);
      
      window.addEventListener('resize', () => {
        this.apStatusChart.resize();
      });
    },
    initRfCharts() {
      this.initChannelUtilChart();
      this.initInterferenceChart();
      this.initNoiseChart();
      this.initAssociationChart();
      this.initRetransmissionChart();
    },
    initChannelUtilChart() {
      this.channelUtilChart = echarts.init(this.$refs.channelUtilChart);
      const data = [
        { value: 43, name: '≥70%', itemStyle: { color: '#ee6666' } },
        { value: 69, name: '(50%,70%]', itemStyle: { color: '#fac858' } },
        { value: 98, name: '<50%', itemStyle: { color: '#91cc75' } }
      ];
      const option = this.createRfChartOption('信道利用率', data);
      this.channelUtilChart.setOption(option);
    },
    initInterferenceChart() {
      this.interferenceChart = echarts.init(this.$refs.interferenceChart);
      const data = [
        { value: 29, name: '≥40%', itemStyle: { color: '#ee6666' } },
        { value: 53, name: '(30%,40%]', itemStyle: { color: '#fac858' } },
        { value: 128, name: '<30%', itemStyle: { color: '#91cc75' } }
      ];
      const option = this.createRfChartOption('干扰率', data);
      this.interferenceChart.setOption(option);
    },
    initNoiseChart() {
      this.noiseChart = echarts.init(this.$refs.noiseChart);
      const data = [
        { value: 19, name: '≥-85dBm', itemStyle: { color: '#ee6666' } },
        { value: 56, name: '(-95dBm,-85dBm]', itemStyle: { color: '#fac858' } },
        { value: 135, name: '<-95dBm', itemStyle: { color: '#91cc75' } }
      ];
      const option = this.createRfChartOption('底噪', data);
      this.noiseChart.setOption(option);
    },
    initAssociationChart() {
      this.associationChart = echarts.init(this.$refs.associationChart);
      const data = [
        { value: 7, name: '≥5%', itemStyle: { color: '#ee6666' } },
        { value: 12, name: '(1%,5%]', itemStyle: { color: '#fac858' } },
        { value: 191, name: '<1%', itemStyle: { color: '#91cc75' } }
      ];
      const option = this.createRfChartOption('关联率', data);
      this.associationChart.setOption(option);
    },
    initRetransmissionChart() {
      this.retransmissionChart = echarts.init(this.$refs.retransmissionChart);
      const data = [
        { value: 27, name: '≥10%', itemStyle: { color: '#ee6666' } },
        { value: 61, name: '(5%,10%]', itemStyle: { color: '#fac858' } },
        { value: 122, name: '<5%', itemStyle: { color: '#91cc75' } }
      ];
      const option = this.createRfChartOption('重传率', data);
      this.retransmissionChart.setOption(option);
    },
    createRfChartOption(title, values) {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}%'
        },
        legend: {
          orient: 'vertical',
          right: '2%',
          top: 'middle',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          formatter: name => {
            const data = values.find(item => item.name === name);
            return `${name} ${data.value}`;
          },
          textStyle: {
            fontSize: 11,
            color: '#666',
            width: 120,
            overflow: 'break',
            lineHeight: 14
          }
        },
        series: [{
          type: 'pie',
          radius: ['65%', '80%'],
          center: ['32%', '50%'],  // 将图表位置稍微左移
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: values
        }]
      };
    }
  }
};
</script>

<style scoped>
.ap-center-layout {
  display: flex;
  height: 100vh; /* 修改为视口高度，确保左右两栏对齐 */
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.sidebar {
  width: 220px; /* 侧边栏宽度，根据实际调整 */
  background-color: #f8f9fa; /* 侧边栏背景色 */
  padding: 0; /* 顶部为0，左右为0，底部为0 */
  border-right: 1px solid #e0e0e0;
  color: #333;
  height: 100%;
  overflow-y: auto; /* 侧边栏内容超出时滚动 */
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-item,
.group-title,
.submenu-item {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
}

.sidebar-item:hover,
.submenu-item:hover {
  background-color: #e9ecef;
}

.group-title {
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #555;
}

.icon-wireless {
  /* 这是一个占位符，您需要用实际的图标替换 */
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #007bff; /* 示例蓝色图标 */
  border-radius: 50%;
  margin-right: 8px;
  /* 如果使用SVG或字体图标，请在此处添加相应样式 */
}

.submenu {
  padding-left: 15px; /* 子菜单缩进 */
}

.submenu-item.active {
  background-color: #e0e6ef; /* 激活项背景色 */
  color: #0056b3; /* 激活项文字颜色 */
  border-left: 3px solid #007bff; /* 激活项左边框 */
  font-weight: bold;
  padding-left: 17px; /* 调整内边距以适应边框 */
}

.main-content-area {
  flex-grow: 1;
  padding: 0 15px 15px 15px; /* 顶部为0，左右和底部为15px */
  overflow-y: auto;
  background-color: #fff;
}

/* 原有的 .ap-center-container 样式现在应用于 .main-content-area 内部的元素 */
/* 因此，我们不再需要顶级的 .ap-center-container 样式 */

.tabs-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.tabs-container button {
  padding: 10px 20px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 16px;
  margin-right: 5px;
  border-bottom: 2px solid transparent;
}

.tabs-container button.active {
  border-bottom: 2px solid #007bff;
  font-weight: bold;
  color: #007bff;
}

.auto-refresh-toggle {
  margin-left: auto;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 14px;
}

.content-area {
  /* 内容区域样式 */
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 15px;
}

.ap-management-title {
  margin-top: 30px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.chart-container {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;
  height: 250px;
}

.chart-placeholder {
  border: 1px dashed #ccc;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-management-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 20px;
  gap: 10px;
}

.left-controls, .right-controls {
  display: flex;
  gap: 8px;
}

.control-btn, .view-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #333;
}

.view-btn.active {
  background: #f0f0f0;
  border-color: #ccc;
}

.ap-table {
  margin: 0 20px;
  background: white;
  border-radius: 4px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th, td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background: #f5f7fa;
  color: #606266;
  font-weight: normal;
}

td {
  color: #606266;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-dot.normal {
  background: #67c23a;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 20px;
  font-size: 12px;
  color: #606266;
}

.pagination-controls {
  display: flex;
  gap: 8px;
}

.pagination-controls button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.pagination-controls button.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination-controls button:disabled {
  background: #f5f7fa;
  cursor: not-allowed;
  color: #c0c4cc;
}

.rf-content {
  padding: 20px;
}

.rf-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
  padding: 0 20px;
}

.rf-chart-container {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  height: 220px;
}

.rf-chart-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
  text-align: left;
  padding-left: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
}
</style>